<template>
	<view>
		<view class="header-batch" id="header-batch">
			<view>
				您可以批量设置多个场地,也可在下方逐个添加
			</view>
			<view class="batch">
				<u-button type="primary" size="mini" @click="noNav">取消批量</u-button>
			</view>
		</view>
		<view class="main">
			<view class="card" v-if="list.length > 0">

				<scroll-view scroll-y :style="[{height: height + 'px'}]" lower-threshold="200">
					<view class="line" hover-stay-time="150" v-for="(item,index) in list" :key="index" 
					:class="index == list.length - 1 ? '' : 'line-bottom'"
					@click="checkboxSubChange(item)">
						<u-checkbox-group @change="checkboxSubChange(item)">
							<u-checkbox :checked="item.check" shape="circle" :label="item.storeName"/>
						</u-checkbox-group>
						<!-- <view class="left" @click="checkboxSubChange(item)">
							<u-checkbox v-model="item.check" shape="circle">{{item.storeName}}</u-checkbox>
						</view> -->
						<view class="right">
							<view>{{item.serviceName != null ? item.serviceName : '未设置'}}</view>
							<view class="icon">
								<u-icon name="arrow-right" color="#999" size="15"></u-icon>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<empty :emptyTitle="'暂无场地'" v-else></empty>
		</view>

		<view class="nextBtn" id="btn">
			<!-- <u-checkbox v-model="checked" @change="checkAll" shape="circle" class="checked">全选</u-checkbox> -->
			<view style="margin: 20rpx 0 20rpx 15rpx;">
				<u-checkbox-group @change="checkAll()">
					<u-checkbox :checked="checked"  shape="circle" label="全选"/>
				</u-checkbox-group>
			</view>
			<view class="btn">
				<u-button type="primary" shape="circle" @click="nav()">下一步</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 0,
				list: [],
				checked: false
			}
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#header-batch').boundingClientRect(data => {
				// console.log('#header-batch', data.height);
				this.height = this.height - data.height;
			}).exec();
			query.select('#btn').boundingClientRect(data => {
				// console.log('#header-batch', data.height);
				this.height = this.height - data.height;
			}).exec();
			this.height = this.height - 30;
			// console.log(this.height);
		},
		onLoad() {
			this.findData();
		},
		onShow() {

		},
		methods: {
			noNav() {
				uni.navigateBack();
			},
			nav() {
				let storeIds = [];
				this.list.forEach(res => {
					if (res.check) {
						storeIds.push(res.merchantStoreId);
					}
				})
				if (storeIds.length <= 0) {
          getApp().err("请选择至少一个场地进行设置");
					return;
				}
				if (storeIds.length > 0) {
					uni.navigateTo({
						url: 'brand-wechat-set?batch=true&storeIds=' + JSON.stringify(storeIds)
					})
				}

			},
			findData() {
				uni.showLoading({
					title: '请稍等...',
					mask: true
				})
				this.$api('customerServiceInfo.findByUserIdList').then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					this.list = res.data;
					this.list.forEach(item => {
						item.check = false;
					})
				})
			},
			// 全选实现
			checkAll() {
				// 每次全选框选择时都给他反选当前的属性
				this.checked = !this.checked
				// 循环把集合里面的选择属性值全部改成和全选属性值一样的
				this.list.map(val => {
					val.check = this.checked;
				})
			},
			// 集合里面的属性选择实现(item是当前点击传过来的参数)
			checkboxSubChange(item) {
				// 反选属性值
				item.check = !item.check;
				//集合中的选择属性值必须全部都是true的时候，返回值就是true，否则false
				this.checked = this.list.every(item1 => item1.check);
				this.list = [...this.list]
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $u-bg-color;
	}
	.header-batch {
		padding: $u-padding-large $u-padding-medium;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
		color: $u-primary;
		font-size: $uni-font-size-base  - 1;
		.batch {
			text-align: right;
		}
	}

	.main {
		padding: 0 $u-padding-large;
		color: rgba(0, 0, 0, 0.75);
		font-size: $f-base;
		.card {
			margin: $u-margin-medium 0;
			padding: $u-padding-mini;
			background-color: white;
			border-radius: 20rpx;

			.line {
				padding: $u-padding-large $u-padding-medium;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 20rpx;

				.left {
					font-size: $uni-font-size-lg - 1;
					font-weight: 450;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left-deteil {
						font-weight: normal;
						font-size: $uni-font-size-sm;
						margin-left: $u-margin-medium;
						color: $u-tips-color;
					}
				}

				.right {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: $u-tips-color;
					font-size: $uni-font-size-base;

					.icon {
						margin-left: $u-margin-medium;
					}
				}
			}

			.line-bottom {
				border-bottom: 1rpx solid #fafafa;
			}
		}

	}

	.nextBtn {
		z-index: 99;
		border-top: 1px solid #fafafa;
		width: 100%;
		height: 166rpx;
		background-color: white;
		position: fixed;
		bottom: 0rpx;
		padding-bottom: 50rpx;
		font-size: $f-base;
		.btn {
			margin-top: 20rpx;
			padding: 0 $u-padding-medium $u-padding-medium $u-padding-medium;

		}
	}
</style>
